<template>
  <div v-if="!sub">
    <!-- 搜索 -->
    <div class="tableSearch">
      <h5 v-if=" !this.isShop == '1'">员工提成汇总表</h5>
      <el-form size="mini" :model="ruleFormShop" ref="ruleFormDaily">
        <el-form-item label="门店：" label-width="80px" prop="shopId" v-if="this.isShop == '1'">
          <el-select v-model="ruleFormShop.shopId" style="width: 100%;">
            <el-option
              v-for="(item) in storeArrDaily"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <br />
      <el-form size="mini" :model="ruleFormDaily" ref="ruleFormDaily">
        <el-form-item label="选择日期：" label-width="100px" prop="startDate">
          <el-date-picker
            v-model="ruleFormDaily.startDate"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择月"
            @change="jobSearch"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="选择岗位：" label-width="120px">
          <el-select v-model="ruleFormDaily.parentId" placeholder="请选择" style="width: 100%;">
            <el-option value label="全部"></el-option>
            <el-option
              v-for="item in optionsDaily"
              :key="item.typeId"
              :value="item.typeId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label label-width="35px">
          <el-button type="primary" @click="seeAbout(20,1)">查询</el-button>
        </el-form-item>
        <el-form-item label label-width="15px">
          <el-button type="primary" @click="download()">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 提成 -->
    <div class="sumOfMoney">
      <figure v-show="copeTwo">
        <div>
          <figcaption>提成合计</figcaption>
          <p v-if="!sumed">￥0.00</p>
          <p v-else>￥{{sumed}}</p>
        </div>
        <img src="../../../src/assets/images/daohang-shujufenxi.png" alt />
      </figure>
      <figure v-show="copeOneed">
        <div>
          <figcaption>商品销售提成汇总</figcaption>
          <p v-if="!goodsSaleAmountSum">￥0.00</p>
          <p v-else>￥{{goodsSaleAmountSum}}</p>
        </div>
        <img src="../../../src/assets/images/shangping.png" alt />
      </figure>
      <figure v-show="copeed">
        <div>
          <figcaption>服务销售提成汇总</figcaption>
          <p v-if="!serviceSaleAmountSum">￥0.00</p>
          <p v-else>￥{{serviceSaleAmountSum}}</p>
        </div>
        <img src="../../../src/assets/images/mn_fuwu.png" alt />
      </figure>
      <figure v-show="copeed">
        <div>
          <figcaption>计次卡销售提成汇总</figcaption>
          <p v-if="!cardSaleAmountSum">￥0.00</p>
          <p v-else>￥{{cardSaleAmountSum}}</p>
        </div>
        <img src="../../../src/assets/images/qiapian.png" alt />
      </figure>
      <figure v-show="copeed">
        <div>
          <figcaption>服务劳动提成汇总</figcaption>
          <p v-if="!serviceLaborAmountSum">￥0.00</p>
          <p v-else>￥{{serviceLaborAmountSum}}</p>
        </div>
        <img src="../../../src/assets/images/jiangli2.png" alt />
      </figure>
    </div>
    <!-- 总会明细表 -->
    <div class="statement">
      <el-table :data="tableData" :summary-method="getSummaries" show-summary stripe style="width: 95%">
        <el-table-column prop="ranking" type="index" align="center" label="排名" width="80"></el-table-column>
        <el-table-column prop="salerName" align="center" label="员工姓名" width="180"></el-table-column>
        <el-table-column prop="payAmount" align="center" label="总业绩">
          <template slot-scope="scope">
            <span v-if="!scope.row.payAmount">￥0.00</span>
            <span v-else>￥{{scope.row.payAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" align="center" label="总提成">
          <template slot-scope="scope">
            <span v-if="!scope.row.amount">￥0.00</span>
            <span v-else>￥{{scope.row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="salePayAmount" align="center" label="销售业绩">
          <template slot-scope="scope">
            <span v-if="!scope.row.salePayAmount">￥0.00</span>
            <span v-else>￥{{scope.row.salePayAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="saleAmount" align="center" label="销售提成">
          <template slot-scope="scope">
            <span v-if="!scope.row.saleAmount">￥0.00</span>
            <span v-else>￥{{scope.row.saleAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="laborPayAmount"
          align="center"
          label="劳动业绩"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.laborPayAmount">￥0.00</span>
            <span v-else>￥{{scope.row.laborPayAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="laborAmount" align="center" label="劳动提成">
          <template slot-scope="scope">
            <span v-if="!scope.row.laborAmount">￥0.00</span>
            <span v-else>￥{{scope.row.laborAmount}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="handle" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="detailsView(scope.$index, tableData)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <div class="pageLevel" v-else>
    <router-view></router-view>
  </div>
</template>

<script>
import utils from "@/util";
import { mapState } from "vuex";
import {
  findEmployeeTypeList,
  selectBaseShopPageList,
  employeeCommissionSum,
  employeeCommissionSumExport
} from "@/api";
var fileDownload = require("js-file-download");
export default {
  data() {
    return {
      ruleFormShop: {
        shopId: "" //门店id
      },
      storeArrDaily: [], //门店数组
      ruleFormDaily: {
        startDate: "", //日期
        parentId: "" //岗位id
      },
      optionsDaily: [], //岗位数组
      pageSize: 20,
      pageNum: 1,
      tableData: [],
      dis: false,
      currentPage: 1,
      pageSize: 20,
      totalItems: 0,
      exportData: {},
      sumed: 0,
      goodsSaleAmountSum: 0,
      serviceSaleAmountSum: 0,
      cardSaleAmountSum: 0,
      serviceLaborAmountSum: 0,
      salerId: "",
      storeId: "",
      businessScope: "", //门店经营范围
      copeOneed: true,
      copeTwo: true,
      copeed: true,
      couponSelected: "",
      a: ""
    };
  },
  computed: {
    ...mapState(["sub", "merchantId", "power", "isShop", "linkName", "isShop"])
  },
  mounted() {
    this.findEmployeeList();
    this._selectBaseShopPageList();
    if (this.isShop == 0) {
      this.ruleFormShop.shopId = this.merchantId;
      this.echoDataTwo();
    }
  },
  created() {
    this.initData({});
  },
  methods: {
    echoDataOne() {
      this.ruleFormShop.shopId = this.storeArrDaily[0].id;
      let aTion = {
        shopId: this.ruleFormShop.shopId,
        searchDate: this.ruleFormDaily.startDate
      };
      employeeCommissionSum(aTion).then(res => {
        let content = res.data;
        this.sumed = content.amountSum;
        this.goodsSaleAmountSum = content.goodsSaleAmountSum;
        this.serviceSaleAmountSum = content.serviceSaleAmountSum;
        this.cardSaleAmountSum = content.cardSaleAmountSum;
        this.serviceLaborAmountSum = content.serviceLaborAmountSum;
        this.tableData = content.list;
      });
    },
    echoDataTwo() {
      let aTion = {
        shopId: this.ruleFormShop.shopId,
        searchDate: this.ruleFormDaily.startDate
      };
      employeeCommissionSum(aTion).then(res => {
        let content = res.data;
        console.log("content:", content);
        this.sumed = content.amountSum;
        this.goodsSaleAmountSum = content.goodsSaleAmountSum;
        this.serviceSaleAmountSum = content.serviceSaleAmountSum;
        this.cardSaleAmountSum = content.cardSaleAmountSum;
        this.serviceLaborAmountSum = content.serviceLaborAmountSum;
        this.tableData = content.list;
      });
    },
    //时间格式
    jobSearch() {
      this.getJobListByMonth();
    },
    async initData(data) {
      var now = new Date();
      var monthn = now.getMonth() + 1;
      var yearn = now.getFullYear();
      this.ruleFormDaily.startDate = yearn + "-" + monthn;
      this.getJobListByMonth();
    },
    async getJobListByMonth(data) {},
    detailsView(index, tDate) {
      //获取表格中的姓名
      let xMing = tDate[index].salerName;
      this.salerName = xMing;
      let nName = "";
      this.storeArrDaily.forEach(item => {
        if (this.ruleFormShop.shopId == item.id) {
          nName = item.name;
        }
      });
      console.log(this.tableData);
      //查看明细路由跳转
      this.$router.push({
        path: "/data-center/employee-commission/employeeCommission-details",
        query: {
          outlet: nName,
          settings: this.ruleFormDaily.startDate, //日期月
          salerId: this.tableData[index].salerId,
          salerName: this.salerName, //员工姓名
          storeId: this.ruleFormShop.shopId, //门店id
          businessScope: this.businessScope //门店经营范围
        }
      });
    },
    _selectBaseShopPageList() {
      //获取门店列表
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
        console.log("res:", res);
        let isStore = {
          id: this.merchantId,
          name: this.linkName
        };
        this.storeArrDaily = res.data.list;
        console.log("this.storeArrDaily:", this.storeArrDaily);
        if (this.isShop == "0") {
          this.storeArrDaily.unshift(isStore);
          this.ruleFormShop.shopId = isStore.id;
        } else if (this.isShop == 1) {
          this.echoDataOne();
        }
      });
    },
    findEmployeeList() {
      //获取员工列表
      findEmployeeTypeList().then(res => {
        if (res.code == 200) {
          this.optionsDaily = res.data.list;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    seeAbout(pageSize, pageNum) {
      //查询
      let objOne = {
        shopId: this.ruleFormShop.shopId,
        searchDate: this.ruleFormDaily.startDate,
        employeeType: this.ruleFormDaily.parentId
      };
      console.log("objOne:", objOne);
      employeeCommissionSum(objOne).then(res => {
        let content = res.data;
        console.log("content:", content);
        this.sumed = content.amountSum;
        this.goodsSaleAmountSum = content.goodsSaleAmountSum;
        this.serviceSaleAmountSum = content.serviceSaleAmountSum;
        this.cardSaleAmountSum = content.cardSaleAmountSum;
        this.serviceLaborAmountSum = content.serviceLaborAmountSum;
        this.businessScope = content.businessScope;
        if (this.businessScope == 0) {
          this.copeed = false;
          this.copeOneed = false;
        }
        if (this.businessScope == 1) {
          this.copeOneed = false;
        }
        this.tableData = content.list;
        if (!this.tableData) {
          return;
        }
        let tableTion = this.tableData.forEach(item => {
          this.salerId = item.salerId;
        });
      });
    },
    download() {
      //导出
      let objThree = {
        shopId: this.ruleFormShop.shopId,
        searchDate: this.ruleFormDaily.startDate,
        employeeType: this.ruleFormDaily.parentId
      };
      //导出
      if (this.tableData.length == "0") {
        this.$message.error("数据为空不能导出");
      } else {
        employeeCommissionSumExport(objThree).then(res => {
          let fileName = "门店员工提成报表.xlsx";
          fileDownload(res, fileName);
        });
      }
    },
    getSummaries(tableData) {
      // 总价
      const { columns, data } = tableData;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        let values
        if (data && data.length > 0) {
          values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = "￥" + sums[index].toFixed(2);
          } else {
            sums[index] = " ";
          }
        }
      });

      return sums;
    }

  }
};
</script>

<style scoped>
h5 {
  font-size: 18px;
  margin-left: 20px;
}
.sumOfMoney {
  padding: 10px 0;
  display: flex;
  position: relative;
}
.sumOfMoney figure {
  width: 210px;
  height: 100px;
  text-align: left;
  margin-left: 20px;
  background: white;
  border-radius: 5px;
  box-shadow: 3px 1px 3px 1px #a9a9a9;
}
.sumOfMoney figure:nth-of-type(1) {
  border-left: 8px #ed6a30 solid;
}
.sumOfMoney figure:nth-of-type(2) {
  border-left: 8px #edc930 solid;
}
.sumOfMoney figure:nth-of-type(3) {
  border-left: 8px #96cb32 solid;
}
.sumOfMoney figure:nth-of-type(4) {
  border-left: 8px #30a8ed solid;
}
.sumOfMoney figure:nth-of-type(5) {
  border-left: 8px #a16ce1 solid;
}
.sumOfMoney figure figcaption {
  padding: 13px 0 5px 0;
  margin-left: 5px;
}
.sumOfMoney figure p {
  font-size: 24px;
  color: red;
  font-weight: 600;
  margin-left: 5px;
}
.statement {
  margin-left: 20px;
  margin: 20px 0 30px 0;
}
figure {
  display: flex;
  justify-content: space-between;
}
img {
  width: 50px;
  height: 50px;
  margin-top: 50px;
}
</style>
